<template>
  <Transfer
    class="w-full"
    :data-source="roleList"
    :targetKeys="roleIds"
    :one-way="true"
    :titles="titles"
    :render="(item) => item.roleName"
    :list-style="{
      width: '50%',
      height: '70vh',
    }"
    @change="handleChange"
    showSearch
  />
</template>

<script lang="ts" setup>
defineOptions({
  name: 'RoleTransfer',
});
import { ref } from 'vue';
import { Transfer } from 'ant-design-vue';
import { getAuthRoleList, setRole } from '../data/api';
import { handleId } from '../data/options';
import { type RoleItem } from '../data/interface';

const titles = ref(['可选角色', '已选角色']);
const roleIds = ref<string[]>([]);
const roleList = ref<RoleItem[]>([]);
const emit = defineEmits(['success']);
const getData = async () => {
  const res: any = await getAuthRoleList({ userId: handleId.value });
  roleIds.value = res.data.roleIds;
  res.data.roleList.forEach((item: RoleItem) => {
    item.key = item.roleId;
  });
  roleList.value = res.data.roleList;
};

const handleChange = (nextTargetKeys: string[]) => {
  roleIds.value = nextTargetKeys;
};

// 设置用户角色
const setRoleQuery = () => {
  return new Promise(async (resolve) => {
    let res: any = await setRole({
      userId: handleId.value,
      roleIds: roleIds.value.toString(),
    });
    resolve(res);
  });
};

defineExpose({
  getData,
  setRoleQuery,
});
</script>
